<template>
  <a-card :loading="cardLoading" :bordered="false" style="height: 100%;">
      <div style="height: 80%">
        <a-checkbox-group
          v-model="value"
          name="checkboxgroup"
          :options="plainOptions"
          @change="onChange"
        />
       <!-- <br />
        <a-checkbox-group :options="plainOptions" :default-value="['Apple']" @change="onChange" />
        <br />
        <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
        <br />-->
        <!--<a-checkbox-group
          :options="optionsWithDisabled"
          disabled
          :default-value="['Apple']"
          @change="onChange"
        >
          <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span>
        </a-checkbox-group>-->
      </div>
      <br />
      <lable>自定义脚本：</lable>
      <a-switch  :defaultChecked="false" @change="switchonChange" style="margin-bottom: 5px">
        <a-icon slot="checkedChildren" type="check" />
        <a-icon slot="unCheckedChildren" type="close" />
      </a-switch>
      <br />
      <a-textarea
        :disabled="switchChecked"
        v-model="sqlValue"
        placeholder="执行脚本"
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
    <br />
    <div class="anty-form-btn" style="padding-top: 110px">
      <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
      <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
    </div>
  </a-card>
</template>
<script>
  import { queryTableColumnList } from '@/api/api'
  import { httpAction } from '@/api/manage'

  const plainOptions = [];
  const options = [
    { label: '数据日期', value: '1111' },
    { label: '客户号', value: '2222' },
    { label: '内部机构号', value: '333' },
  ];

  const optionsWithDisabled = [
    /*{ value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange', disabled: false },*/
  ];
  var llbbReportRule ={
    ruleCode: '',
    ruleName: '',
    ruleClass: '',
    ruleLevel: '',
    ruleDesc: '',
    ruleSql: '',
    ruleParam: '',
    reportName: '',
    reportField: '',
    reportRuleStatus: '',
  }
  export default {
    name: "RelevancePage",
    props: {
      'tableName': String,
      'columnName': String,
      'ruleData': Number,
      'title': String,
    },
    data() {
      return {
        switchChecked: true,
        plainOptions,
        options,
        optionsWithDisabled,
        cardLoading: false,
        loading: false,
        value: [],
        sqlValue: '',
      };
    },
    created() {
      this.queryTreeData()
    },
    methods: {
      switchonChange(checked) {
        this.switchChecked = !checked
        if(!checked){
          this.sqlValue = ''
        }
        /* console.log(`a-switch to ${checked}`);*/
      },
      queryTreeDataBytableName(tableName){
        queryTableColumnList({
          tableName: tableName ? tableName : undefined
        }).then(res => {
          if (res.success) {
            this.plainOptions = res.result
            this.loading = false
            this.cardLoading = false
          } else {
            this.$message.warn(res.message)
            console.error('表结构查询失败:', res)
            this.loading = false
            this.cardLoading = false
          }
        })
      },
      onChange(checkedValue) {
       /* console.log('checkedValue = ', checkedValue);
        console.log('value = ', this.value);
        console.log('this  ', );*/
      },
      queryTreeData(){
        queryTableColumnList({
          tableName: this.tableName ? this.tableName : undefined
        }).then(res => {
          if (res.success) {
            this.plainOptions = res.result
            this.loading = false
            this.cardLoading = false
          } else {
            this.$message.warn(res.message)
            /*console.error('表结构查询失败:', res)*/
            this.loading = false
            this.cardLoading = false
          }
        })
      },
      emptyCurrForm(){
        this.value = []
      },
      submitCurrForm(){
        var tableColumn = '';
        var name = '';
        if(this.value.length === 0){
          this.$message.warn("请勾选字段！")
        }else{
          var  that = this
          llbbReportRule.ruleCode = 'IRR-W001'
          llbbReportRule.ruleName = '唯一校验'
          llbbReportRule.ruleClass = '1'
          llbbReportRule.ruleLevel = '1'
          llbbReportRule.ruleSql = this.sqlValue
          llbbReportRule.reportName = this.tableName
          /*llbbReportRule.reportField = this.columnName*/
          llbbReportRule.reportRuleStatus ='1'
          this.value.forEach(function(element) {
            that.plainOptions.forEach(function(ele) {
              if(element == ele.value){
                name = name + ele.label +","
              }
            });
            tableColumn = tableColumn + that.tableName+"-"+element+","
          });
          if(this.value.length > 1){
            llbbReportRule.ruleDesc = name+"关联唯一"
          }else{
            llbbReportRule.ruleDesc = name+"唯一"
          }
          llbbReportRule.reportField= tableColumn.substring(0, tableColumn.lastIndexOf(','));

          httpAction("/reportrule/llbbReportRule/add",llbbReportRule,'post').then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
              this.$emit('renovateTbleList', true)

            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            this.value = []
            this.sqlValue = ''
          })

        }

      },

        },

  };
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin: 15px;
  }

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }

  .anty-node-layout .ant-layout-header {
    padding-right: 0
  }

  .header {
    padding: 0 8px;
  }

  .header button {
    margin: 0 3px
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  #app .desktop {
    height: auto !important;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .drawer-bootom-button {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>